<script setup lang="ts">
import { onMounted, shallowRef } from 'vue'

import BlockHead from './block-head.vue'
import ItemTenItem from './item-ten-item.vue'

import type { HrNews } from '../type'

defineOptions({
  name: 'ItemTen',
})

const props = defineProps<{
  data: HrNews[]
}>()

const data = shallowRef<{ title: string, time: string, content: string, [key: string]: any }[]>([])

onMounted(() => {
  data.value = props.data.map((v) => {
    return {
      title: v.title,
      time: v.updateTime,
      content: v.content,
    }
  })
})
</script>

<template>
  <div class="flex flex-col">
    <BlockHead title="新闻公告看板" />
    <div class="block-body h-48 w-full flex flex-auto flex-wrap">
      <ElScrollbar class="h-full w-full" wrap-style="outline: none;">
        <ItemTenItem v-for="item in data" :key="item.time" v-bind="item" />
      </ElScrollbar>
    </div>
  </div>
</template>
